<template>
    <!-- <div>
        新品推荐
    </div> -->
    <!-- 筛选搜索 -->
    <el-card>
        <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span style="line-height: 32px;margin-left: 10px;">筛选搜索</span>
            </div>

        </div>
        <el-form :model="form" label-width="120px">
            <div style="display:flex;">
                <el-form-item label="商品名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="推荐状态">
                    <el-select v-model="form.region" placeholder="全部">
                        <el-option label="未推荐" value="0" />
                        <el-option label="推荐中" value="1" />
                    </el-select>
                </el-form-item>
            </div>
            <div class="btn">
                <el-form-item>
                    <el-button @click="czbtn">重置</el-button>
                    <el-button type="primary" @click="ckss">查询搜索</el-button>
                </el-form-item>
            </div>
        </el-form>
    </el-card>

    <!-- 数据列表 -->
    <el-card>
        <div style="display: flex; justify-content: space-between;">
            <div>
                <el-icon>
                    <Tickets />
                </el-icon>
                <span style="line-height: 32px;margin-left: 10px;">数据列表</span>
            </div>
            <el-button @click="Selectlist">选择商品</el-button>
        </div>
    </el-card>
    <!-- 用户表格 -->
    <div class="list">
        <el-table :data="tableData.list" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="55" />
            <el-table-column prop="brandName" label="商品名称" />
            <el-table-column label="是否推荐">
                <template #default="scope">
                    <el-switch :value="scope.row.recommendStatus === 1 ? true : false" @change="accc(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="recommendStatus" label="状态">
                <template #default="scope">
                    <div>{{ scope.row.recommendStatus === 0 ? '未推荐' : '推荐中' }}</div>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="sortlist(scope.row)">
                        设置排序
                    </el-button>
                    <el-button link type="primary" size="small" @click="deleet(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="foot">
        <div style="display: flex;margin-top: 23px;">
            <el-form-item>
                <el-select v-model="a.aslist" placeholder="批量操作">
                    <el-option v-for="item in Operationstatus" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            &nbsp;
            <el-form-item>
                <template #default="scope">
                    <el-button type="primary" @click="deleetlist">确定</el-button>
                </template>

            </el-form-item>
        </div>
        <!-- 分页 -->
        <el-pagination v-model:current-page="tableData.pageNum" v-model="tableData.pageSize" :page-sizes="[1, 5, 10, 20]"
            background layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <!-- 排序弹出框 -->
        <Edit :visible="visible" :Editform="Editform" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>
        <!-- 选择品牌弹出框 -->
        <SelectEdit :Selectvisible="Selectvisible" @cancel="SelectonCloseDialog" @confirm="SelectonConfirmDialog">
        </SelectEdit>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'
import * as api from '../../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import Edit from "../../components/homeBrandEidt.vue"
import SelectEdit from '../../components/homeBrandxzEdit.vue'


let form = reactive({
    name: '',
    region: ''
})
let router = useRouter()


let tableData = reactive({
    list: <any>[],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    totalPage: 0
})
//id数组
let ids = ref([]) as Ref<number | number[]>
//
let a = reactive({
    aslist: ''
})
//弹出框状态
let visible = ref(false)
// SelectEdit 选择品牌
let Selectvisible = ref(false)
//弹出框表单
let Editform = reactive({
    id: 0,
    sort: 0
})
//选择操作状态

let Operationstatus = [
    {
        id: 1,
        name: '设为推荐'
    },
    {
        id: 0,
        name: '取消推荐'
    },
    {
        id: 2,
        name: '删除'
    },

]
//请求页面数据
let gethomenew = async () => {
    let tabdata = await api.yxadmin.getnewProduc({
        pageNum: tableData.pageNum,
        pageSize: tableData.pageSize
    })
    // console.log(tabdata);
    tableData.list = tabdata.list
    tableData.pageNum = tabdata.pageNum
    tableData.pageSize = tabdata.pageSize
    tableData.total = tabdata.total
    tableData.totalPage = tabdata.totalPage
}
gethomenew()

//获取到id
let handleSelectionChange = (val: any) => {
    console.log(val);
    let a = val.map((item: any) => {
        return item.id
    })
    console.log(a);
    ids.value = a

    console.log(ids.value);
    // // console.log(ids.value.toString());
    // //转为字符串
    // ids.value = ids.value.toString()

}

//批量删除
let deleetlist = async () => {
    console.log(a.aslist);

    if (Number(a.aslist) === 2) {
        // getclassify()
        await api.yxadmin.deletenewproductlist(String(ids.value))
        gethomenew()

    } else {
        await api.yxadmin.upnewproductlist({
            ids: String(ids.value),
            recommendStatus: Number(a.aslist)
        })
        gethomenew()
    }



}
//点击打开弹出框
let sortlist = (a: any) => {
    Editform.sort = a.sort
    Editform.id = a.id
    visible.value = true
}
let Selectlist = () => {
    Selectvisible.value = true
}


// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
    // console.log(val);
    tableData.pageSize = val;
    gethomenew()
}
// 改变当前页数
let handleCurrentChange = (val: number) => {
    // console.log(val);
    tableData.pageNum = val;
    gethomenew()

}
//删除
let deleet = async (data: any) => {
    // console.log(a.aslist);
    // console.log(data);
    ids.value = data.id

    console.log(data);
    await api.yxadmin.deletenewproductlist(data.id)
    gethomenew()


}
//查询按钮
let ckss = async () => {
    console.log(form);
    let tabdata = await api.yxadmin.getnewProduc({
        pageNum: tableData.pageNum,
        pageSize: tableData.pageSize,
        productName: form.name,
        recommendStatus: Number(form.region)
    })
    console.log(tabdata);
    tableData.list = tabdata.list
    tableData.pageNum = tabdata.pageNum
    tableData.pageSize = tabdata.pageSize
    tableData.total = tabdata.total
    tableData.totalPage = tabdata.totalPage
}
//重置
let czbtn = () => {
    form.name = ''
    form.region = ''
}
//开关
let accc = (val: any) => {
    console.log(val);
    ElMessageBox.confirm(
        '是否需要修改推荐状态？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }

    )
        .then(async () => {
            // 发请求
            if (val.recommendStatus === 0) {
                await api.yxadmin.upnewproductlist({
                    ids: val.id,
                    recommendStatus: 1
                })
                gethomenew()
            } else {
                await api.yxadmin.upnewproductlist({
                    ids: val.id,
                    recommendStatus: 0
                })
                gethomenew()
            }
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            });
        })



}
// 子级 emit组件传过来的事件
const onCloseDialog = () => {
    visible.value = false
}
const SelectonCloseDialog = () => {
    Selectvisible.value = false
}
// 确认了输入框的内容之后
const onConfirmDialog = (row: string) => {
    ElMessageBox.confirm(
        '是否要修改排序？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let a = Number(row)
            console.log(a);

            // 发请求
            // await api.admin.getRegister(row)
            await api.yxadmin.upsort({
                id: Editform.id,
                sort: a
            })
            // console.log('点击成功');
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            gethomenew()
            // router.go(0)
            visible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            });
            visible.value = false
        })
}
const SelectonConfirmDialog = (row: any) => {
    console.log(row);

    ElMessageBox.confirm(
        '是否要修改排序？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            if (row == '') {
                console.log(1);
                return
            }
            await api.yxadmin.createproductlist(row)
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            gethomenew()
            router.go(0)
            Selectvisible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            });
            // Selectvisible.value = false
        })
}

</script>

<style lang="scss" scoped>
.el-card {
    margin: 20px 0px;
    position: relative;
}

.foot {
    display: flex;
    justify-content: space-between;
}

.btn {
    position: absolute;
    right: 20px;
    top: 20px;
}
</style>
